TMM: Landing Page Rebuild
User testing, UX strategy, and interface copy ○ Summer 2022
As a final sendoff to my summer internship, I partnered with a fellow Experience Design Intern to refresh a pre-existing landing page for T-Mobile Money (TMM), an online banking service. Together, we set a couple broad objectives for our project: match the page to the company's new design system and voice better, and market the service more effectively.
Along with writing and editing new interface copy, I also conducted research on our target audiences, developed corporate brand strategy to back the new copy, created a low-fidelity page wireframe, and helped tweak the final prototype in Figma.
To begin crafting the messaging and organization behind the page, I decided to conduct a site audit. My project partner and I interviewed stakeholders (including potential customers and past users) to map their interactions and record their feelings (likes, dislikes, frustrations) with the original page.
Examining their reactions, I broke down the page element by element, identifying which copy and design needed to be retrofitted. The main patterns I noticed were that users were getting tired of scrolling through the many modules on the page, had a hard time reading or relating to word content, and didn't see how the banking service was any different from its competitors.
Based on this user feedback, I formed two high-level objectives to focus on with my rewrite and wireframe: highlight the unique advantages of our service, and shorten the time a user takes to find these advantages. Next, in order to achieve my objectives, I consolidated any icons or headlines with repetitive messaging, rewrote body copy and CTAs to be more accessible and friendlier (matching the tone of the brand voice better), and created a new wireframe to act as the foundation for our Figma prototype.
or web pages, first impressions need to be succinct (to move users to the information they need quickly, without frustration) and stimulating (so they’re curious enough to keep scrolling!) To create a first impression that satisfied these parameters, I wanted to work on the benefits at-a-glance module located just under the title module. The high page positioning put it in the right spot to leave a first impression to viewers, making it very valuable.
I wrote new subheads for the benefits module to quickly demonstrate how useful each was, without the user having to search for it. My intention with these subheads was to provide a jumping-off point for users to delve into the body copy, as well as generate interest, hooking them enough to want to find out more. To do so, I kept the phrases brief enough for a speedy interaction, but enigmatic enough to spark curiosity.
Knowing audiences visiting our page are younger T-Mobile customers with less knowledge of financial terminology, I aimed to write approachable copy that bridged the gap of understanding between them and our product. I rephrased benefits in a straightforward, relaxed manner.
Earlier, data I gathered on our target audience showed that the tech-savvy owners of online banking accounts have saved money during the pandemic. In a post-Covid world, taking time off is a priority to our audience. This is why when building out our wireframe, I chose to move the 'account fees' section to the benefits module (where it relates better to the surrounding content), and use the saved space to emphasize the bank's travel perks. I wanted to be intentional when breaking up modules, and spotlight what our audience finds important. When what they care about is represented, they understand why the service would be good for them. Plus, logically organized copy makes content much easier to comprehend.
Researching common pain points consumers have with their online bank accounts, I used pathos language to address these sentiments in our benefits module. Phrases like “save more,” “don’t sweat,” and “it’s your money, have it sooner" tap into concerns that are important to potential customers.
Being transparent when spelling out the advantages of the service not only builds the business's authenticity, but also makes the benefits digestible. This is the outcome we were aiming for after getting user feedback in our audit that the page felt daunting. The conversational tone I employ in describing these benefits also molds the interaction to feel more intimate, like our user is getting advice from a friend. Bringing warmth to a page about serious topics like money and banking primes our users to associate good feelings with our product and feel comfy navigating the rest of the page. Because the benefits module is high up on the page, this is helpful.
After plugging the new copy options into Figma, I set up several review sessions with more senior copywriters to go over page elements, headings, subheads, and body copy. During these, the lack of inclusive language in the page buttons was criticized. I took this as a learning opportunity to find creative alternatives to the usual ableist language we usually rely on for CTAs (like changing buttons from "see" to "explore," "get," or "check.")
Once the new prototype was approved by our team, we presented a pitch deck to the Head of Experience Design to break down the rebuild. After presenting, it was unanimously agreed the new page was cleaner, had more appetizing copy, and fit the direction the company was heading in better than its predecessor. This project had me working as a stand-in UX researcher, project manager, writer, and designer all rolled into one. I combined my design-thinking skills and love for writing to perform user-testing, create a makeshift creative brief, and make copy for an audience. Taking our concept from drawing board to keyboard to screen was a thrill that kept me on my toes as a budding content strategist and writer, and a great way to round out summer!
